<template>
    <div>
      <div class="height45 title">优惠</div>
      <ul v-if="discountArray" class="discountList"
          >
        <li v-for="(discount, $index) in discountArray" :key="discount.id"
            @click="selectStyle (discount, $index) ">
          <div class="discount-item"
               :class="{'active':discount.active}">
            <span v-if="discount.type === 0">
              {{discount.fullCut}}<span class="rebate-text">{{discount.rebate}}</span>折
            </span>
            <span v-if="discount.type === 1">{{discount.fullCut}}</span>
          </div>
        </li>
      </ul>
    </div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue'

export default {
  props: {

  },
  data () {
    return {
      active: false,
      discountArray: [
        {
          id: 111,
          type: 0,
          rebate: 8.5,
          fullCut: '整单优惠'
        },
        {
          id: 222,
          type: 0,
          rebate: 8.5,
          fullCut: '单品优惠'
        },
        {
          id: 333,
          type: 1,
          rebate: 0,
          fullCut: '单品买二送一'
        }
      ]
    }
  },
  methods: {
    selectStyle (item, index) {
      this.$nextTick(function () {
        this.discountArray.forEach(function (item) {
          Vue.set(item, 'active', false)
        })
        Vue.set(item, 'active', true)
      })
    }
  }
}
</script>

<style lang="less">
@import '../../../../assets/css/color';

  .title {
    background-color: @whiteColor;
    color: @black333Color;
    text-align: center;
    font-size: 10px;
  }
  .discountList {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 5px;
    background-color: @whiteColor;
    color: @black333Color;
    text-align: center;
  }
  .discount-item {
    background: #fff;
    border: 1px solid #f7f7f7;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    line-height: 50px;
    text-align: center;
    margin-bottom: 3px;
    font-size: 10px;
    .rebate-text {
      font-size: 18px;
      font-weight:bold;
      margin: 0 3px;
    }
    &.active {
       background-color: #CFE4F8;
       border-color: #6AA7E3;
     }
  }

</style>
